<template>
  <div class="operLabel">
    <el-table :data="labelList.filter(data => !searchTagName || data.tagName.includes(searchTagName))"
      :v-loading="tableLoader">
      <el-table-column prop="tagId" label="标签ID" width="300" align="center">
      </el-table-column>

      <el-table-column prop="tagName" label="标签名" width="150" align="center">
      </el-table-column>

      <el-table-column prop="usedCount" label="引用视频数量" width="150" align="center">
      </el-table-column>

      <el-table-column label="创建时间" width="200" align="center">
        <template slot-scope="scope">
          {{
            scope.row.createTime | dateFormat("yyyy-mm-dd hh:mm:ss")
          }}
        </template>
      </el-table-column>

      <el-table-column align="center" width="180">
        <template slot="header" slot-scope="scope">
          <el-input prefix-icon="el-icon-search" v-model="searchTagName" size="big" placeholder="通过标签名搜索" />
        </template>
        <template slot-scope="scope">
          <el-button class="tableButton" @click="handleDelete(scope.row.tagId)" type="danger" size="small">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 每页5条 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getLabelList" />
  </div>
</template>

<script>
import { getLabelList, deleteLabel } from "@/api/label";

export default {
  name: "operLabel",
  data() {
    return {
      labelList: null,
      searchTagName: '',
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        search: "",
      },
      total: 0,
      tableLoader: false,
    };
  },

  created() {
    this.tableLoader = true
    this.getLabelList();
  },

  methods: {
    getLabelList() {
      getLabelList(this.queryParams).then((res) => {
        this.labelList = res.rows;
        this.total = res.total;
        this.tableLoader = false
      });
    },

    handleDelete(lid) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteLabel(lid).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableLoader = true
          this.getLabelList();
        });
      });
    },
  },

  watch: {
    searchTagName(newVal) {
      console.log(newVal);
    }
  },

  filters: {
    dateFormat: function (val, args) {
      if (val) {
        var dt = new Date(val);
        var year = dt.getFullYear();
        var month = ("0" + (dt.getMonth() + 1)).slice(-2);
        var day = ("0" + dt.getDate()).slice(-2);
        if (args.toLowerCase() === "yyyy-mm-dd") {
          return year + "-" + month + "-" + day;
        } else {
          var hour = ("0" + dt.getHours()).slice(-2);
          var min = ("0" + dt.getMinutes()).slice(-2);
          var sec = ("0" + dt.getSeconds()).slice(-2);
          return (
            year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
          );
        }
      } else {
        return '';
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tableButton {
  margin-right: 40px;
}
</style>
